<template>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="a in msg"><img :src="a"></div>
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return {
				msg:['static/Carousel2.jpg','static/Carousel2.jpg']
			}
		},
	   	methods:{
		  	swipers:function(){
		  		var swiper = new Swiper('.swiper-container', {
			        pagination: '.swiper-pagination',
			        paginationClickable: true,
			        autoplay:2000
			    });
	
		  	}
		  },
		mounted:function(){
		  	this.swipers();
		  }
	}
</script>
<style scoped>
	html,body{position:relative;height:100%;}
	body{background:#eee;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;color:#000;margin:0;padding:0;}
	.swiper-container{width:100%;height:100%;}
	.swiper-slide{
		width: 100%;
		text-align:center;
		font-size:18px;
		background:#fff;
		display:-webkit-box;
		display:-ms-flexbox;
		display:-webkit-flex;
		display:flex;
		-webkit-box-pack:center;
		-ms-flex-pack:center;
		-webkit-justify-content:center;
		justify-content:center;
		-webkit-box-align:center;
		-ms-flex-align:center;
		-webkit-align-items:center;
		align-items:center;
	}
	.swiper-pagination-bullet{
		width:20px;height:20px;
		text-align:center;
		line-height:20px;
		font-size:12px;
		color:#000;
		opacity:1;background:rgba(0,0,0,0.2);
	}
	.swiper-pagination-bullet-active{color:#fff;background:#007aff;}
	.swiper-slide img{
		width: 100%;
	}
</style>